<template>
  <div>
    <Teleport to="body">
      <div class="fixed h-screen z-30">
        <img src="/bg.png" alt="" class="h-screen object-cover brightness-150">
        <div class="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white w-[1151px] h-[724px] absolute flex flex-col items-center p-4 pt-16 bg-opacity-50 shadow-lg rounded-md backdrop-blur-sm">
          <div class="text-[#F5A99F] text-7xl font-kuaile">
            经记人
          </div>
          <div class="w-1/2 relative shadow-lg rounded-md mt-14 overflow-hidden flex bg-white items-center">
            <Icon name="tabler:user" class="text-4xl ml-2 text-gray-500" />
            <input v-model="user.name" type="text" class="h-16 p-2 w-full outline-none " placeholder="请输入用户名">
          </div>
          <div class="w-1/2 relative shadow-lg rounded-md mt-14 overflow-hidden flex bg-white items-center">
            <Icon name="tabler:lock" class="text-4xl ml-2 text-gray-500" />
            <input v-model="user.passwd" type="password" class="h-16 p-2 w-full outline-none " placeholder="请输入密码">
          </div>
          <button class="rounded-full bg-[#F5A99F] text-white mt-24 p-4 px-16" @click="handleLogin">
            现在登录
          </button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
// 解决跳转后页面没有刷新的bug
const router = useRouter()
const route = useRoute()
if (route.query.refresh) {
  router.replace({
    path: '/login',
    query: {}
  }).then(() => {
    router.go(0)
  })
}

const message = useMessage()
const { signIn } = useAuth()
const user = reactive({
  name: '',
  passwd: ''
})

async function handleLogin () {
  try {
    await signIn({ ...user }, { callbackUrl: '/user' })
  } catch (e) {
    message.warning('登录失败')
  }
}
</script>
